<template>
  <div class="page-container">
    <el-card class="box-card">
      <div class="group">
        <div class="item" v-for="item in videoList">
          <div class="constant" @click="skip(item)">
            <el-image :src="item.thumbs.url2" class="img"/>
          </div>
          <div class="foot">
            <div class="fileName">
              <span>{{item.server_filename}}</span>
            </div>
            <div class="time">
              {{formatDayTime(item.local_ctime*1000)}}
            </div>
            <div class="btn">
              <el-button size="small" icon="ele-VideoPlay" plain @click="skip(item)">立即播放</el-button>
            </div>
          </div>
        </div>
      </div>

      <div class="page-block">
        <el-pagination v-model:currentPage="search.page" v-model:page-size="search.num" :page-sizes="[15, 30, 45, 60]"
                       :small="true" :disabled="false" :background="false" layout="total, sizes, prev, pager, next, jumper"
                       :total="total" @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"/>
      </div>

    </el-card>
  </div>
</template>

<script>
import {onMounted, reactive, toRefs} from "vue";
import {getVideoFileList} from "../../../api/oa/course";
import { usePlayerStates } from '/@/stores/course/player'
import {useRouter} from "vue-router/dist/vue-router";


export default {
  name: "index",
  setup(props, context) {
    const router = useRouter()
    const storesPlayer = usePlayerStates();
    const state = reactive({
      search:{
        path:'',
        desc:'1',
        page:1,
        num:15
      },
      videoList:[],
      total:87, //先写死 网盘没有这个参数 得自己计算
    })
    //获取视频列表
    const getList = () => {
      getVideoFileList(state.search).then(res =>{
        state.videoList = res.data.info
      })
    }
    //时间戳转y-m-d
    const formatDayTime = (val) => {
      if(val) {
        let date = new Date(val)
        let Y = date.getFullYear();
        let M = date.getMonth() + 1;
        let D = date.getDate();
        if(M < 10) {
          M = '0' + M;
        }
        if(D < 10) {
          D = '0' + D;
        }
        return Y + '-' + M + '-' + D ;
      } else {
        return '';
      }
    }
    // 条数切换
    const handleSizeChange = e => {
      state.search.num = e
      handleCurrentChange(1)
    }
    // 页码切换
    const handleCurrentChange = e => {
      state.search.page = e
      getList()
    }
    //跳转
    const skip = (val) => {
      storesPlayer.setPlayerConfigStates({path:val.path,fileName:val.server_filename,poster:val.thumbs.url3});
      router.push({name:"CoursePlay"})
    }
    onMounted(() => {
      getList()
    })

    return{
      ...toRefs(state),
      formatDayTime,
      handleSizeChange,
      handleCurrentChange,
      skip,
    }
  }


}
</script>

<style scoped lang="scss">
.page-container{

  .group{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 30px;

    .item:hover{
      background-color: #eaeaea;
    }

    .item{
      position: relative;
      width: 330px;
      height: 250px;
      padding: 30px;
      border-radius: 10px;

      .constant{
        .img{
          border-radius: 10px;
          cursor: pointer;
        }
      }

      .foot {
        width: 330px;
        height: 30px;
        text-overflow: ellipsis;
        text-align: center;

        .fileName {
          width: 270px;
          font-size: 14px;
          margin-bottom: 5px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;
        }

        .fileName:hover{
          cursor: pointer;
          color: #00AEEC;
        }

        .time{
          display: inline-block;
          float: left;
          margin-top: 10px;
          font-size: 12px;
          font-weight: 500;
          color: #777a80;
        }
        .btn{
          display: inline-block;
          float: right;
          margin-top: 5px;
          margin-right: 60px;
        }
      }



    }
  }
}
</style>
